<template>
  <div>
    <van-nav-bar title="详情页" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" />
    <div class="imgs">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img :src="$route.query.item.img" alt=""></van-swipe-item>
        <van-swipe-item><img :src="$route.query.item.img" alt=""></van-swipe-item>
        <van-swipe-item><img :src="$route.query.item.img" alt=""></van-swipe-item>
        <van-swipe-item><img :src="$route.query.item.img" alt=""></van-swipe-item>
      </van-swipe>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" @click="qyp()" />
    </van-goods-action>
    <van-row>
      <van-col span="24">
        <h4>{{$route.query.item.title}}</h4>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="8" class="price">价格：{{$route.query.item.price}}</van-col>
      <van-col span="8">邮费：包邮</van-col>
      <van-col span="8">已售：14</van-col>
    </van-row>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: this.$route.query.item,
      };
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
      qyp() {
          this.$store.commit("addshop", this.list);
          this.$toast("添加成功");
      },
    },
  }
</script>
<style lang="scss">
  .my-swipe .van-swipe-item {
    color: rgb(241, 14, 14);
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: white;
  }

  .price {
    color: red;
  }
</style>